/*
    需要body里面
*/
// 获取大ul标签
var ul = document.querySelector('.list .box ul')
// 获取分页标签
var fenye = document.querySelector('.list .box .fenye')
// 设置当前页current默认值为1
var current = 1
// 调用先requestDate()函数一次
requestDate()
// 创建requestDate函数
function requestDate() {
    sendAjax({
        url: 'http://localhost:8888/goods/list',
        data: {
            current
        },
        success: res => {
            console.log(res)
            //     将res里面的code， list， total解构出来
            var {
                code,
                list,
                total
            } = res
            //     判断当code是否全等1
            if (code === 1) {
                //     如果全等表示数据已经获取成功， 并进行以下操作：【 给ul下插入图文内容】
                //     新建一个空字符串str
                var str = ''
                //     对解构后的list进行遍历并给其v赋予一个函数
                list.forEach(v => {
                    str += `
                    <li>
                            <a href="../html/datail.html?id=${v.goods_id}">
                                <img src="${v.img_big_logo}" alt="">
                                <span class="price">￥${v.price}</span>
                                <br>
                                <span class="title">${v.title}</span>
                            </a>
                        </li>
                    `
                });
                //     在大ul下渲染str
                ul.innerHTML = str


                // 【 添加分页】
                //     根据当前数据和当前页动态渲染分页【 实现的结果为 首页 上一页 中间五页 下一页 尾页】【 将其分成 `首页 上一页`
                //     if判断 `下一页 尾页`】

                // 创建一个模板字符串pageStr
                var pageStr = `
                    <div class="first" onclick="first()">首页</div>
                    <div class="prev" onclick="prev()">上一页</div>
                    <div class="list">
                `
                //     判断其总页数total是否小于5页
                if (total <= 5) {
                    //   调用 createP函数并传入1和total 并将其返回值追加给pageStr
                    pageStr += createP(1, total)
                } else {
                    // 判断当前页current是不是前三页
                    if (current <= 3) {
                        // 调用 createP函数并传入1和5【 前面五页】 并将其返回值追加给pageStr
                        pageStr += createP(1, 5)
                    } else if (current >= total - 2) {
                        // 调用 createP函数并传入total - 4 和total【 最后五页】 并将其返回值追加给pageStr
                        pageStr += createP(total - 4, total)
                    } else {
                        //调用 createP函数并传入current - 2 和current + 2 并将其返回值追加给pageStr
                        pageStr += createP(current - 2, current + 2)

                    }
                }
                pageStr += `
                </div>
                <div class="next" onclick="next(${total})">下一页</div>
                <div class="last" onclick="last(${total})">尾页</div>
                `
                fenye.innerHTML = pageStr

            }
        }
    })
}


//  设置点击上一页的函数prev
function prev() {

    // 当前页current累减
    current--
    // 【让其连点不跳转】
    // 判断当前页小于1时 把current直接赋为1并 return 
    if (current <= 1) {
        current = 1
        return
    }
    // 如果判断不成立就重新调用函数requestData
    requestDate()
}


// 设置点击首页的函数first
function first() {
    // 【让其连点不跳转】
    // 判断当前页等于1时  return 
    if (current === 1) return
    // 如果判断不成立就 把current赋值为1
    current = 1
    // 重新调用函数requestData
    requestDate()
}

//  设置点击尾页的函数last(total)
function last(total) {
    // 【让其连点不跳转】
    // 判断当前页等于total时  return 
    if (current === total) return
    // 如果判断不成立就
    // 把current赋值为total
    current = total
    // 重新调用函数requestData
    requestDate()
}

//  设置点击下一页的函数next(total)
function next(total) {
    // 将current累加
    current++
    // 【让其连点不跳转】
    // 判断当前页大于total时 把当前页current赋值为total  return 
    if (current >= total) {
        current = total
        return
    }
    // 如果判断不成立就重新调用函数requestData
    requestDate()
}

// 设置点击页码的函数toCurrent
function toCurrent(i) {
    // 【让其连点不跳转】
    // 判断当前页等于点击的页面i时  return 
    if (current === i) return
    // 如果判断不成立就 把current赋值为当前页码i
    current = i
    // 调用重新函数requestData
    requestDate()
}

//  创建页码p标签的函数createP
function createP(start, end) { // 传入一个开始下标，还有一个结束下标
    // 创建一个新数组str
    var str = ''
    // for循环遍历 
    for (i = start; i <= end; i++) {
        //     判断当此时的下标等于当前页的值时候
        if (i === current) {
            str +=
                `
                <p onclick="toCurrent(${i})" class="active">${i}</p>
                `
        } else {
            str +=
                `
                <p onclick="toCurrent(${i})">${i}</p>
                 `
        }
        
    }
    return str
}